<template>
  <div>
    <div class="header">
      <el-button
        type="primary"
        icon="el-icon-circle-plus"
        size="small"
        class="plus"
        @click="showDialog"
        >添加</el-button
      >
      <el-input
        v-model="number"
        placeholder="请输入学号"
        style="width: 160px"
        size="small"
        @keyup.enter.native="find"
      ></el-input>
      <el-button
        icon="el-icon-search"
        circle
        size="small"
        @click="find"
      ></el-button>
    </div>

    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        @sort-change="sort"
        border
        class="tableBox"
      >
        <el-table-column
          :key="index"
          v-for="(item, index) in datalist"
          :prop="item.prop"
          :label="item.label"
          :sortable="'custom'"
          :align="item.align"
        >
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <!-- slot-scope="scope" 这里取到当前单元格 -->
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >修改密码</el-button
            >
            <el-button type="text" size="small" @click="deleteClick(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="page.sizeNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
      <!-- 分页 -->
    </div>
    <Dialog
      @close="closeDialog"
      @add="addNumber"
      v-if="isVisible"
      ref="ref"
    ></Dialog>
    <Modify
      @close="closeModify"
      v-if="isVisible_modify"
      ref="modify"
      :id="studentNumber"
    ></Modify>
  </div>
</template>

<script>
const datalist = [
  { label: "姓名", prop: "name", align: "center", sort: "custom" },
  { label: "学号", prop: "studentNumber", align: "center", sort: "custom" },
  { label: "年级", prop: "grade", align: "center", sort: "custom" },
  { label: "专业", prop: "major", align: "center", sort: "custom" },
  { label: "班级", prop: "clazz", align: "center", sort: "custom" },
  { label: "手机号", prop: "phone", align: "center", sort: "custom" },
  { label: "邮箱", prop: "email", align: "center", sort: "custom" },
];
import Dialog from "./components/dialog.vue";
import Modify from "./components/modify.vue";
export default {
  components: {
    Dialog,
    Modify,
  },
  data() {
    return {
      datalist,
      number: null,
      currentPage: 1,
      isVisible: false,
      isVisible_modify: false,
      page: {
        currentPage: 1, // 当前页
        sizeNum: 10, // 每页条数
      },
      totalCount: null,
      tableData: [],
      myDebounce: null,
      studentNumber: "",
      loading: true,
      orderField: "", //排序字段
      order: "", //排序方式 descending or ascending
    };
  },
  mounted() {
    this.getAxios();
    //防抖，防止重复点击造成多次请求数据
    this.myDebounce = this.myFunc.debounce(this.search, 500);
  },
  methods: {
    sort(column) {
      console.log(column);
      console.log(this.myFunc.formatName(column.prop));
      // this.orderField = this.api.formatName(column.prop);
      if (column.order == "ascending") {
        this.order = "asc";
      } else if (column.order == "descending") {
        this.order = "desc";
      }
      this.getAxios();
    },
    getAxios() {
      this.$axios
        .get("/user/list", {
          params: {
            page: this.page.currentPage,
            limit: this.page.sizeNum,
            orderField: this.orderField,
            order: this.order,
          },
        })
        .then((res) => {
          // console.log(res);
          // console.log(this.orderField);
          this.totalCount = res.data.data.page.totalCount;
          const data = res.data.data.page.list;
          // console.log(data);
          this.tableData.length = 0;
          this.tableData = data;
        });
    },
    addNumber() {
      this.getAxios();
    },
    formatter(row, column) {
      console.log(column);
      return row.email;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.page.sizeNum = val;
      this.getAxios();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      this.getAxios();
    },
    handleClick(row) {
      // console.log(row);
      this.studentNumber = row.studentNumber;
      console.log(this.studentNumber);
      this.isVisible_modify = true;
      this.$nextTick(() => {
        this.$refs.modify.open();
      });
    },
    closeDialog() {
      this.isVisible = false;
    },
    closeModify() {
      this.isVisible_modify = false;
    },
    showDialog() {
      this.isVisible = true;
      this.$nextTick(() => {
        this.$refs.ref.openDialog();
      });
    },
    deleteClick(row) {
      // console.log(row);
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.delete("/user/delete/" + row.studentNumber).then(() => {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000,
            });
            // console.log(res);
            this.getAxios();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    search() {
      console.log(this.number);
      this.$axios
        .get("/user/search/number", {
          params: {
            studentNumber: this.number,
          },
        })
        .then((res) => {
          const data = res.data.data.user;
          this.tableData = data;
        });
    },
    find() {
      this.myDebounce();
    },
  },
  watch: {
    number() {
      if (this.number.length == 0) {
        this.getAxios();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.plus {
  margin: 0 10px 0 0;
}
//深度选择器，去除默认的padding
.el-table {
  /deep/ th {
    height: 20px;
    padding: 0;
  }
  /deep/ td {
    height: 4rem;
    padding: 0;
  }
}
</style>